<template>
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <div class="">
        <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
          <a-form layout="inline">

            <a-form-item label="名称">
              <a-input v-model="searchParams.name"></a-input>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
            </a-form-item>

            <a-form-item v-if="isAuth('sys:menu:save')">
              <a-button type="primary" icon="plus" @click="handleCreate">新增</a-button>
            </a-form-item>


          </a-form>
        </a-card>
      </div>


      <a-table :columns="columns" :dataSource="data"
               :customRow = "customRow"
               bordered size="small" rowKey="id"
               :pagination="false" :loading="loading"

      >
        <template slot="hidden" slot-scope="text, record">
          {{text ? '是' : '否'}}
        </template>

        <span slot="action" slot-scope="text, record">
        <template>
          <a  v-if="isAuth('sys:menu:update')"  href="javascript:;" @click="handleUpdate(record)">修改</a>
          <a-divider type="vertical"/>
          <a  v-if="isAuth('sys:menu:delete')"  href="javascript:;" @click="handleDelete(record)">删除</a>
        </template>
      </span>

      </a-table>

      <a-modal  :maskClosable="false"
        v-if="mdl.visible"
        :title="mdl.dialogTitleMap[mdl.dialogStatus]"
        :width="700"
        v-model="mdl.visible"
        @ok="mdl.dialogStatus === 'update' ?  updateData() : createData() "
      >

        <a-form>

          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="菜单标题"
          >
            <a-input placeholder="" v-model="mdl.formData.title"  />
          </a-form-item>

          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="路由名称"
          >
            <a-input placeholder="" v-model="mdl.formData.name"  />
          </a-form-item>

          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="路由path"
          >
            <a-input placeholder="" v-model="mdl.formData.path" />
          </a-form-item>


          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="重定向"
          >
            <a-input placeholder="" v-model="mdl.formData.redirect" />
          </a-form-item>


          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="组件名称"
          >
            <a-input placeholder="" v-model="mdl.formData.component" />
          </a-form-item>

          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="上级菜单"
          >
            <MenuTree v-model="mdl.formData.parentId"></MenuTree>
          </a-form-item>

          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="菜单图标" >
            <a-input v-model="mdl.formData.icon" />
          </a-form-item>

          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="排序编号" >
            <a-input-number v-model="mdl.formData.orderNum" :min="0" controls-position="right" label="排序编号"/>
          </a-form-item>

          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="是否隐藏"
          >
            <a-switch checkedChildren="是" unCheckedChildren="否" v-model="mdl.formData.hidden" />
          </a-form-item>
        </a-form>
      </a-modal>

    </a-card>


  </div>
</template>

<script>
  import MenuTree from '@/hzjComponents/treeSelect/MenuTree'
  import {
    queryMenuList,
    queryMenuTree,
    queryMenuTrees,
    menuInsert,
    menuDelete,
    menuUpdate
  } from "@/api/system/menu"

  const align = 'center'

  const menuTreeData =  [
    {
      title: 'Node1',
      value: '0-0',
      key: '0-0',
      children: [
        {
          value: '0-0-1',
          key: '0-0-1',
          title: 'Child Node1',
        },
        {
          title: 'Child Node2',
          value: '0-0-2',
          key: '0-0-2',
        },
      ],
    },
    {
      title: 'Node2',
      value: '0-1',
      key: '0-1',
    },
  ];

  export default {
    components: {MenuTree},
    data() {
      return {

        menuTypeOptions:[
          { label: '目录', value: 0 },
          { label: '菜单', value: 1},
          { label: '按钮', value: 2 },
        ],
        menuTreeData,

        /*   -------搜索框--------*/
        searchParams: {
          name: ''
        },

        /*   -------弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加',
            lowerLevel:'添加下级机构'
          },
          visible: false,
          title: '',
          formData: {
            parentId:0,  //父菜单
            id: null,
            hidden: false,  //是否隐藏
            icon: '',       //菜单图标
            name: '',       //路由名
            title: '',      //菜单标题
            component: '',  //组件名
            path: '',       //路由path
            redirect:"",    //重定向
            orderNum: null  //排序
          },
          labelCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 5
            }
          }
          ,
          wrapperCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 16
            }
          }
          ,
        },


        /*   -------表格--------*/
        loading: false,
        columns:  [
          {
            title: 'ID',
            dataIndex: 'id',
            align
          },
          {
            title: '菜单名称',
            dataIndex: 'title',
            align
          },
          {
            title: '路由名称',
            dataIndex: 'name',
            align
          },
          {
            title: '路由path',
            dataIndex: 'path',
            align
          },
          {
            title: '路由组件',
            dataIndex: 'component',
            align
          },
          {
            title: '路由图标',
            dataIndex: 'icon',
            align
          },
          {
            title: '重定向',
            dataIndex: 'redirect',
            align
          },
          {
            title: '菜单排序号',
            dataIndex: 'orderNum',
            align
          },
          {
            title: '是否隐藏',
            dataIndex: 'hidden',
            scopedSlots: { customRender: 'hidden' },
            align
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            align,
            scopedSlots: { customRender: 'action' }
          }
        ],
        data: [],
        selectedRowKeys: [], // Check here to configure the default column

      }
    },
    inject: ['upShow'],filters: {},
    created() {

    },
    computed:{
      menuTypeName(){
        console.log("mdl", this.mdl)
        console.log("formData",this.mdl.formData)
        console.log("type",this.mdl.formData.type)
       const index =  this.mdl.formData.type
        console.log("index",index)
        return this.menuTypeOptions[index].label
      }
    },

    mounted() {
      this.getTableData()
    },
    methods: {

      customRow(record, index) {
        if(record.hidden == '1'){
          record.hidden = true
        }else {
          record.hidden = false
        }

      },

      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },

      getTableData() {

        this.loading = true

        const parameter = {
          _search: false,//是否分页查询
          data: this.searchParams
        }
        queryMenuTrees(parameter).then(res => {
          if(res.code===200){
            this.data =   this.$util.filterRowChildren(res.data)
            this.loading = false
          }
          this.loading = false

        }).catch(err => {
          this.loading = false
          this.upShow(2,'操作失败')
        })
      },
      handleSearch() {
        this.getTableData()
      },

      setDefaults() {
        this.mdl.formData = {
          parentId:0,  //父菜单
          id: null,
          hidden: false,  //是否隐藏
          icon: '',       //菜单图标
          name: '',       //路由名
          title: '',      //菜单标题
          component: '',  //组件名
          path: '',       //路由path
          redirect:"",    //重定向
          orderNum: null  //排序
        }
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true

      },
      createData() {
        const parameter =  {...this.mdl.formData}
        parameter.hidden =  parameter.hidden ? 1 :0
      //  parameter.parentId = 0
        menuInsert(parameter).then(res => {
          if (res.code === 200) {
            this.upShow(1,"添加数据")
            this.mdl.visible = false
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2,'接口调用失败')
        })
      },

      //编辑当前行
      handleUpdate(row) {
        console.log("这一行", row)
        this.mdl.formData.parentId = row.parentId
        this.mdl.formData.id = row.id
        this.mdl.formData.icon = row.icon
        this.mdl.formData.name = row.name
        this.mdl.formData.title = row.title
        this.mdl.formData.component = row.component
        this.mdl.formData.path = row.path
        this.mdl.formData.redirect = row.redirect
        this.mdl.formData.orderNum = row.orderNum
        this.mdl.formData.hidden = row.hidden
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
      },

      updateData(row) {

        let parameter = this.mdl.formData
        parameter.hidden = parameter.hidden ? 1 : 0
        menuUpdate(parameter).then(res => {
          if (res.code === 200 ) {
            this.upShow(2,"操作成功")
            this.mdl.visible = false
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2)
        })
      },

      handleDelete(row) {
        menuDelete(row.id).then(res => {
          if (res.code === 200
          ) {
            this.upShow(1,res.msg || '删除成功')
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2)
        })
      },

      handleLowerLevel(row) {
        this.setDefaults()
        this.mdl.formData.parentId = row.id // copy obj
        this.mdl.formData.parentName = row.name
        this.mdl.dialogStatus = 'lowerLevel'
        this.mdl.visible = true
      },


    }
  }
</script>

<style scoped>

</style>
